import React from 'react';
import { generate, green, presetPalettes, red } from '@ant-design/colors';
import { ColorPicker, theme  } from 'antd';
import { useDispatch, useSelector } from 'react-redux'
import { setMainColor } from '@/store/modules/colorStore'
const genPresets = (presets = presetPalettes) =>
    Object.entries(presets).map(([label, colors]) => ({
      label,
      colors,
    }));
const Demo = () => {
    const { token } = theme.useToken();
    const dispatch = useDispatch()
    let color = useSelector(state => state.color.mainColor)
    const setColorEvent = (e) => {
        dispatch(setMainColor(e.toHexString()))
    }
    const presets = genPresets({
        primary: generate(token.colorPrimary),
        red,
        green,
      });
    return <ColorPicker format='hex' trigger="hover" presets={presets} defaultValue={color} onChange={setColorEvent} />;
};
export default Demo;